/*
*作者---杨彬
*
*/
<template>
  <div>
    <header>
      <img src="./../../assets/index/logo.png" class="com-div-middle-ab program-left">
      <input class="com-div-center-center-ab" placeholder="请输入商品名称" v-model="productName">
      <img src="./../../assets/index/searcher.png" class="com-div-middle-ab program-right"
           @click="getSearch(productName)"
      >
    </header>
    <section v-if="isSearch" style='min-height:12rem;'>
      <div class="index-product-list category" v-for="(pitem,pindex) in searchData">
        <div class="div-list">
          <div class="com-font0 list-header"><img :src="pitem.categoryImg"></div>
          <div class="list-content">
            <div class="list-item" v-for="(oitem,oindex) in pitem.products" @click="goProducDetailFn(oitem)">
              <div class="item-picture">
                <img :src="oitem.img">
              </div>
              <p class="en-name" v-text="oitem.englishName"></p>
              <p class="cn-name" v-text="oitem.name"></p>
              <p class="price-size" v-text="oitem.price+'元/'+oitem.size+oitem.productUnit"></p>
            </div>
            <div class="com-clear-float"></div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<script type="text/javascript">
  
  export default {
    data(){
      return {
        getData: "",
        productName: "",
        bannerUrl: [],
        bannerurl: [],
        leftUrl: '',
        rightUrl: '',
        isSearch: true,
        searchData:''
      }
    },
    props: ['sData'],
    mounted () {
    },
    methods: {
      bannerGO (val) {
        this.getAjax(val.linkurl,'',
        (res) => {
          if(res.data&&res.data.length>=1){
            this.searchData = res.data;
            console.log(this.searchData)
          }else{
            m$.template({
               val: '很抱歉,后台数据出错了',
               time: 1500
             })
          }
          }) 
      },
      getSearch (oname){
        if(oname)
        this.isSearch = true;
        this.getAjax(this.sData.url.index, {productName: (oname ? oname : '')},
        (res) => {
          if(res.data&&res.data.length>=1){
            this.searchData = res.data;
          }else{
            m$.template({
               val: '很抱歉,没有符合条件的商品',
               time: 1500
             })
          }
          
        })
      },
      goProducDetailFn(oitem){
        this.$router.push({
          name: 'productDetail',
          params: {productId: oitem.id}
        })
      }
    },
    created(){
      // document.title = this.sData.indexStaticsData.title;
      m$.documentTitle(this.sData.indexStaticsData.title);
      if(this.$route.params.searchName){//通过搜索路径进来
        //存到本地(返回时就会有数据)
        m$.localStrages.set('backSearchData',this.$route.params.searchName);
        this.getSearch(this.$route.params.searchName);
      }else if(this.$route.params.GoCategory){//通过首页banner图的分类点击进来
        //存到本地(返回时就会有数据)
        m$.localStrages.set('backCategoryData',this.$route.params.GoCategory);
        this.bannerGO(this.$route.params.GoCategory);
      }else if(m$.localStrages.get('backSearchData')){//返回时获取数据
        this.getSearch(m$.localStrages.get('backSearchData'));
      }else if(m$.localStrages.get('backCategoryData')){//返回时获取数据
        this.bannerGO(m$.localStrages.get('backCategoryData'));
      }
      
    }
  }

</script>
<style scoped lang="less">
  @import "index.less";
</style>
